<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
</head>

<body>
    <!-- 我们常常在注册信息页面，表单底部会有一个选择框：
    使用DOM对象和jQuery对象分别实现下列要求：
    没有勾选时，点击提交按钮时，弹出框提示“不同意协议，我们将无法为您提供服务”。
    勾选后，点击提交。弹出框提示“提交成功”。 -->
    <form action="">
        <input type="checkbox" name="accept" id="cb">同意并接受注册协议
        <br />
        <input type="submit" id="btn" value="提交">
    </form>
    <script>
        // 使用dom对象实现
        let cb = document.getElementById('cb');
        let btn = document.getElementById('btn');
        btn.onclick = function(){
            if(cb.checked == true){
                alert('提交成功');
            }else{
                alert('不同意协议，我们将无法为您提供服务');
            }
        }
        //使用jQuery对象实现
        let $cb = $('#cb');
        let $btn = $('#btn');
        $btn.get(0).onclick = function(){
            if($cb.get(0).checked == true){
                // alert('提交成功');
            }else{
                alert('不同意协议，我们将无法为您提供服务');
            }
        }
    </script>
</body>

</html>